<template>
    <div>
        <c-tabs
            :active="activeRoute"
            :items="tabs"
            @click="handleRouteChange"></c-tabs>
        <div class="tab-container">
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </div>
    </div>
</template>

<script>
import { tabs } from '@/components'

export default {
  name: 'help-sapce-wrap',
  components: {
    'c-tabs': tabs
  },
  data () {
    return {
      tabs: [
        {
          label: '用户手册',
          active: '/help-space/handbook'
        },
        {
          label: '常见问题',
          active: '/help-space/questions'
        },
        {
          label: '视频教程',
          active: '/help-space/video'
        }
      ]
    }
  },
  computed: {
    activeRoute () {
      return this.$route.path
    }
  },
  methods: {
    handleRouteChange (tab) {
      this.$router.push(tab.active)
    }
  }
}
</script>

<style lang="less">
.tab-container {
    background: #fff;
    padding: 16px;
    border-radius: 8px;
    min-height: 540px;
}
.help-space-video {
    width: 100%;
    max-width: 100%;
    background-color: snow;
}
.hs {
    &-class-name {
        display: inline-block;
        width: 230px;
        vertical-align: middle;
    }

    &-tip-name {
        display: inline-block;
        width: 190px;
        vertical-align: middle;
    }

    &-container {
        display: flex;
        margin-top: 15px;
        min-height: 560px;

        .ivu-tooltip-popper {
            width: 220px;
        }
        .ivu-tooltip-inner {
            white-space: pre-wrap;
            text-align: left;
        }
    }

    &-menu {
        width: 300px;
        min-width: 200px;
        margin-right: 15px;
        .ivu-collapse-header {
            height: auto !important;
            padding-right: 10px;
            line-height: 2 !important;
            padding-top: 5px;
            padding-bottom: 5px;
        }
        &-title {
            display: flex;
            justify-content: space-between;
            font-size: 18px;
            font-weight: 700;
            padding-top: 10px;
            .ivu-icon {
                cursor: pointer;
            }
        }

        .ivu-icon-arrow-right-b {
            margin-right: 5px;
        }

        &.is-collapse {
            width: auto;
            min-width: auto;
            .ivu-collapse-header {
                padding-left: 20px;
                
            }

            .question-list {
                padding-left: 25px;
                padding-right: 10px;
            }

            .ivu-card-head {
                padding: 0;
            }

            .ivu-icon {
                padding: 14px 16px;
            }
        }
    }

    &-content {
        position: relative;
        flex: 1;
        border:1px solid #dddee1;
    }
    &-date {
        color: #aaa;
        padding: 0 20px 10px;
    }

    &-class-header {
        padding: 10px 20px;
        font-size: 16px;
        font-weight: 600;
        border: 1px solid #ccc;
        border-radius: 2px;
        margin-bottom: 10px;
    }

    &-class-title {
        margin-left: 10px;
        font-size: 14px;
    }

    &-class-extra {
        float: right;
        margin-right: 10px;
    }

    &-class-list {
        padding-left: 50px;
        font-size: 14px;
        cursor: pointer;
        & > li {
            margin-bottom: 10px;
        }
        & > li:last-child {
            margin-bottom: 0;
        }
    }

    &-detail {
        background-color: #eee;
        border: 1px solid #ccc;

        &-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 60px;
            padding: 0 20px;
            font-weight: 600;
            font-size: 18px;
            line-height: 1;
            border-bottom: 1px solid #aaa;
        }

        &-content {
            padding: 20px;
        }
    }
}
.help-wrapper {
    .ivu-collapse-content > .ivu-collapse-content-box {
        padding: 0;
    }
    .question-type {
        font-size: 14px;
        padding: 14px 16px;
        border: 1px solid #e9eaec;
        margin-bottom: 6px;
    }

    .question-list {
        padding: 5px 40px;
        padding-right: 20px;
        li {
            margin-bottom: 10px;
            cursor: pointer;
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
    .text_active {
        color: #05bac5;
    }
    .question-content {
        padding: 20px;
        padding-top: 0;
        line-height: 2;
        word-break: break-all;

        img {
            max-width: 100%;
        }
    }

    .help-container {
        border: 1px solid #bbbec4;
        min-height: 600px;
        &:last-child {
            margin-left: -1px;
        }
    }
}
</style>